<!doctype html>
<html lang="zh-CN">
<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- 新 Bootstrap4 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

  <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>-->

  {js href="js/colorpalettepicker.js" /}
  <title>Hello, world!</title>
  <style>
    .d1{
      border:1px solid #96C2F1;
      background-color:#EFF7FF;
    }
    .d2{
      border:1px solid #9BDF70;
      background-color:#F0FBEB;
    }
    .d3{
      border:1px solid #92B0DD;
      background-color:#FFFFFF;
    }
    .d4{
      border:1px solid #BBE1F1;
      background-color:#EEFAFF;
    }
    .d5{
      border:1px solid #CCEFF5;
      background-color:#FAFCFD;
    }
    .d6{
      border:1px solid #FFCC00;
      background-color:#FFFFF7;
    }
    .d7{
      border:1px solid #A9C9E2;
      background-color:#E8F5FE;
    }
    .d8{
      border:1px solid #E3E197;
      background-color:#FFFFDD;
    }
    .d9{
      border:1px solid #ADCD3C;
      background-color:#F2FDDB;
    }
    .d10{
      border:1px solid #F8B3D0;
      background-color:#FFF5FA;
    }
    .d11{
      border:1px solid #D3D3D3;
      background-color:#F7F7F7;
    }
    .d12{
      border:1px solid #BFD1EB;
      background-color:#F3FAFF;
    }
    .d13{
      border:1px solid #FFDD99;
      background-color:#FFF9ED;
    }
    .d14{
      border:1px solid #CACAFF;
      background-color:#F7F7FF;
    }
    .d15{
      border:1px solid #A5B6C8;
      background-color:#EEF3F7;
    }
    .d16{
      border:1px solid #CEE3E9;
      background-color:#F1F7F9;
    }
    .d17{
      border:1px solid #CAE3FF;
      background-color:#F4F9FF;
    }
    .d18{
      border:1px solid #C9D9EE;
      background-color:#ECF8FF;
    }

</style>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <h1 align="center">许愿墙</h1>
<!--      <h5 class="float-right">用户名:{$username}</h5>-->
      <div class="dropdown float-right">
        <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false">
          用户名:{$username}
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <a class="dropdown-item" type="button" href="#">个人中心</a>
          <a class="dropdown-item" type="button" href="#">好友</a>
          <a class="dropdown-item" type="button" href="/outLogin">退出登录</a>
        </div>
      </div>
    </div>
  </div>
  <div class="row" >
    <div class="col card-columns">
        {foreach $list as $key=>$vo}
            <div class="card  animate__animated animate__lightSpeedInLeft {$vo.background} " >
              <div class="card-header" style="background-color:transparent;">
                <div class="row justify-content-between">
                  <div class="col-4">{$vo.client_id}</div>
                  <div class="col-2">
                    {if $username==$vo.client_id}
                    <a href="/delete/{$vo.id}"><i class="bi bi-backspace" ></i></a>
                    {/if}
                  </div>
                </div>

              </div>
              <div class="card-body" >
                {$vo.remain_word}
              </div>
              <div class="card-footer" style="background-color:transparent;border:none">
                {$vo.create_time}
              </div>
            </div>
          <br/>
        {/foreach}
    </div>
  </div>
<!--  分页-->
  <div class="row">
    <div class="col">
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <li class="page-item"><a class="page-link" href="#">总数:{$total}</a></li>
          {for start='1' end="$lastPage+1" name='j'  step='1'}
          <li class="page-item"><a class="page-link" href="/home/{$j}/20">{$j}</a></li>
          {/for}
          <li class="page-item"><a class="page-link" href="#">当前为第:{$currentPage}页</a></li>
        </ul>
      </nav>
    </div>
  </div>
<!--  -->
  <div class="row">
    <div class="col">
          <form class="was-validated" action="/addGuestBook" method="post">
            <label for="validationTextarea">
              <h2>发布愿望</h2>
            </label>
            <div class="col-12">
              <div class="input-group mb-3">
                <select class="custom-select" id="inputGroupSelect01" name="background">
                  <option selected value="d1">蓝色</option>
                  <option value="d2" >青色</option>
                  <option value="d3">白色</option>
                  <option value="d4">紫色</option>
                </select>
              </div>
            </div>
            <div class="col-12"></div>
            <div class="col-12">
              <textarea name="remain_word" class="form-control is-invalid" id="validationTextarea"
                        placeholder="快来发表，你的愿望吧！！！！(200字以内)" required cols="150" rows="5"
                        onkeyup="this.value=this.value.replace(/^(?!.{201})/,'')" maxlength='200'
              ></textarea>
              <br>
              <button type="submit" class="btn btn-primary btn-lg btn-block">提交</button>
            </div>
          </form>
      </div>
  </div>
</div>

</div>
</body>
</html>